<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { login } from '~/api/account'
let { changeToForget, loginModel } = $(useModel())
let { switchLoginState } = $(useUser())

// 初始值
const currentInfo = reactive({
  phone: '',
  password: ''
})

// 校验规则
const rules = {
  phone: [{ required: true, trigger: 'blur', message: '请输入手机号!' }],
  password: [{ required: true, trigger: 'blur', message: '请输入密码!' }]
}

// 表单提交
const onFinish = async () => {
  // 登录接口{ phone: string, password?: string, code: string }
  const res = await login({ phone: currentInfo.phone, password: currentInfo.password })
  if (res.code === 0) {
    switchLoginState(res.data)
    loginModel = false
    message.success('登录成功')
  }
}
</script>

<template>
  <div>
    <a-form autocomplete="off" ref="formRef" :model="currentInfo" @finish="onFinish">
      <a-form-item name="phone" :rules="rules.phone">
        <a-input placeholder="请输入手机号" v-model:value='currentInfo.phone' />
      </a-form-item>
      <a-form-item name="password" :rules="rules.password">
        <a-input-password type="password" placeholder="请输入密码" autoComplete="false"
          v-model:value='currentInfo.password' />
      </a-form-item>
      <div flexb>
        <a-form-item>
          <div flex mt-2px text-10px>
            <p>登录即同意小滴课堂</p>
            <a ml-4px color="#169bd5" target="__blank">《隐私政策》</a>
          </div>
        </a-form-item>

        <a-form-item>
          <span cursor-pointer text-center text-12px color="#555555" @click="changeToForget">忘记密码</span>
        </a-form-item>
      </div>
      <a-form-item>
        <button type="submit" bg="#4d555d" class="rounded-full btn center-text-36 w-300px text-white">
          立即登录
        </button>
      </a-form-item>
    </a-form>
    <Bottom type='login' />
  </div>
</template>